<template>
  <div class="beautifulScroll" :class="!searchshow ? 'sbody' : 'sbodys'">
    <!-- <headMain v-if="!addbsshow && !addbsshowlx" :mensid="mensid" /> -->
    <!-- 提示弹窗 -->
    <van-dialog
      title=""
      show-cancel-button
      v-model:show="show"
      @confirm="history = []"
    >
      <div class="clser"> 清除历史记录 </div></van-dialog
    >
    <!-- 搜索状态真正搜索跳转 -->
    <div v-if="searchshow" class="searchshowbox">
      <van-search
        v-model="formModel.medicineAtlasName"
        shape="round"
        background="transparent"
        placeholder="请输入搜索关键词"
        @clear="reset"
      >
        <template #left>
          <div @click="backfn" class="backfn"
            ><van-icon name="arrow-left"
          /></div>
        </template>
        <template #right-icon>
          <div @click="onPageChange(1)" style="color: black"
            >搜索&nbsp;&nbsp;</div
          >
        </template>
      </van-search>
      <!-- 历史搜索记录 -->
      <div class="serachlsbox">
        <div class="serchlstitle">历史搜索</div>
        <div class="serchlsdel" @click="show = true">
          <img src="@/assets/images/delete.png" alt="" />
        </div>
      </div>
      <div class="serchlsitembox">
        <div
          class="serchlsitem"
          v-for="item in history"
          :key="item"
          @click="lsfn(item)"
          >{{ item }}</div
        >
      </div>
    </div>
    <!-- 真实搜索完成 -->

    <!-- 搜索和条件筛选 虚假搜索 -->
    <div class="headbox" v-if="!searchshow">
      <div class="headserbox" @click="searchshow = true">
        <img src="@/assets/images/search.png" alt="" class="headserboximg" />
        请输入关键字</div
      >
      <div class="henxx" @click="gonotice">
        <div class="henxxicon">{{ imessagetotal }}</div>
        <img src="@/assets/images/xsimg.png" alt="" />
      </div>
      <div class="clearser" @click="reset"> 清空 </div>
      <div @click="visible = true" class="selcetboximg">
        <img src="@/assets/images/selcetboximg.png" alt="" />
        筛选
      </div>
    </div>
    <!-- main 主题内容区域 -->
    <div class="maintpbox" v-if="!addbsshow && !addbsshowlx">
      <!-- 侧边栏-->
      <div class="sidebar" v-if="!searchshow">
        <div
          class="sidebar-item"
          @click="bodyPartsIdfn('')"
          :class="formModel.bodyPartsId ? '' : 'active'"
          >全部</div
        >
        <div
          class="sidebar-item"
          v-for="item in bodyPartdata"
          :class="formModel.bodyPartsId == item.bodyPartsId ? 'active' : ''"
          @click="bodyPartsIdfn(item.bodyPartsId)"
          >{{ item.partsName }}</div
        >
      </div>
      <!-- 侧边完成 -->
      <!-- 右侧图谱展示区域 -->
      <div
        :class="
          !searchshow
            ? 'mainboxright beautifulScroll'
            : 'mainboxrights beautifulScroll'
        "
        v-if="tplistdata.length > 0"
      >
        <div class="maintpitem" v-for="item in tplistdata" :key="item">
          <div class="maintpheader"> {{ item.partsName }}</div>
          <div class="maintpitembox">
            <div
              :class="!searchshow ? 'tpitembox' : 'tpitemboxs'"
              v-for="items in item.atlasList"
              :key="items"
            >
              <div class="tpitemimg">
                <img :src="`${base + items.url}`" alt=""
              /></div>
              <div class="tpitemmain">
                <div class="tpitemname">{{ items.medicineAtlasName }}</div>
                <div class="tpitemsc" @click="addfolderfn(items)">
                  <img
                    src="@/assets/images/tpitemsc.png"
                    alt=""
                    class="tpitemscimg"
                    v-if="items.favoriteStatus != 1"
                  />
                  <img
                    src="@/assets/images/tpitemscac.png"
                    alt=""
                    class="tpitemscimg"
                    v-else
                  />
                  收藏
                </div>
                <div class="tpitemment">
                  <div
                    class="tpitemmentzx"
                    @click="addbs(items.medicineAtlasId, items)"
                    >自学模式</div
                  >
                  <div
                    @click="addbslx(items.medicineAtlasId, items)"
                    class="tpitemmentlx"
                    >练习模式</div
                  >
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="qsbox" v-else>
        <img src="@/assets/images/qsl.png" alt="" />
        暂无数据
      </div>
    </div>
    <!-- 抽屉筛选 -->

    <div class="ctfiexd" v-if="visible">
      <div class="ctmain">
        <div class="cttop"
          >系统分类
          <img
            src="@/assets/images/closenew.png"
            alt=""
            class="closenew"
            @click="visible = false"
          />
        </div>
        <div class="ctbox">
          <div
            @click="medicineSystemIdfn('')"
            class="ctitem"
            :class="formModel.medicineSystemId ? '' : 'active'"
            >全部</div
          >
          <div
            @click="medicineSystemIdfn(item.dictDataId)"
            class="ctitem"
            :class="
              formModel.medicineSystemId == item.dictDataId ? 'active' : ''
            "
            v-for="item in medicineSystemIddata"
            :key="item.dictDataId"
            >{{ item.dictLabel }}</div
          >
        </div>
      </div>
    </div>
    <!-- 主题内容区域完成 -->
    <!-- 底部菜单 -->
    <Tabbar :active="1" v-if="!addbsshow && !addbsshowlx" />

    <!-- 图谱详情页面  -->
    <indexadmin
      v-if="addbsshow"
      :addbsshowlx="addbsshowlx"
      :partsName="partsName"
      @goback="goback"
      :imgsrc="imgsrc"
      :imggroup="imggroup"
      :imgclassdata="imgclassdata"
      :medicineAtlasId="medicineAtlasId"
      :atlasTypeName="atlasTypeName"
    />
    <!-- 加载画面 -->
    <div class="loader-container" v-if="loding">
      <div class="loader"></div>
      <p class="pd">加载中80%</p>
    </div>
    <!-- 历史记录提示 -->
    <div class="lsshow" v-if="lsshow">
      <img
        src="@/assets/images/close-circle-filled.png"
        alt=""
        class="lsclose"
        @click="lsshow = false"
      />
      <div class="lsmain">
        <div class="lsimg"> <img :src="`${base + lsdata.url}`" /></div>
        <div class="lsdes">
          <div class="lsdesname">{{ lsdata.medicineAtlasName }}</div>
          <div class="lsdespages">您上次学习到{{ page }}页</div>
        </div>
      </div>
      <div @click="addbs(lsdata.medicineAtlasId, lsdata)" class="lsbotton"
        >继续学习
        <img src="@/assets/images/caret-right-small.png" alt="" class="small"
      /></div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import indexlx from '@/views/login/indexlx.vue';
  import headMain from '@/views/headmain/index.vue';
  import { computed, ref, reactive } from 'vue';
  import { Message, Modal, TreeNodeData } from '@arco-design/web-vue';
  import {
    tpList,
    rtbwlist,
    personList,
    tpxqList,
    select,
    getTree,
    addfolder,
    deletefolder,
    noticeList,
  } from '@/api/tplist';
  import { showSuccessToast, showFailToast } from 'vant';
  import useLoading from '@/hooks/loading';
  import { storeToRefs } from 'pinia';
  import { useUserStore } from '@/store';
  const userStore = useUserStore();
  const userdata = storeToRefs(userStore);
  const studentId = ref(userdata.studentId.value);
  // 当前标识id
  const mensid = ref('1');
  const loding = ref(false);
  const tplistdata = ref([]);
  const addbwShow = ref(false);
  const { loading, setLoading } = useLoading(true);
  const fieldNames = { value: 'bodyPartsId', label: 'partsName' };
  const fieldNamess = { value: 'dictDataId', label: 'dictLabel' };

  import indexadmin from '@/views/imglist/imgDetails.vue';
  import indexty from '@/views/personadmin/indexty.vue';
  import Tabbar from '../tabbar/tabbar.vue';
  import { Pagination } from '@/types/global';
  import { useRouter } from 'vue-router';
  const router = useRouter();
  // 去消息列表
  const gonotice = () => {
    router.push({
      name: 'outbox',
    });
  };

  // 定义历史学习记录
  const lsdata = ref(null);
  const timer = ref();
  const lsshow = ref(false);
  const page = ref();
  const lsdatafn = () => {
    lsdata.value = JSON.parse(localStorage.getItem('tpitem'));

    if (lsdata.value) {
      lsshow.value = true;
      page.value = localStorage.getItem('dcompage');
      console.log('存在历史记录');
      timer.value = setTimeout(() => {
        lsshow.value = false;
        clearTimeout(timer.value);
      }, 2000);
    }
  };
  lsdatafn();
  // 获取历史记录完成

  // 重置
  const reset = () => {
    formModel.value = generateFormModel();
    fetchData();
  };
  // 切换了搜索哦
  const bodyPartsIdfn = (i) => {
    formModel.value.bodyPartsId = i;
    onPageChange(1);
  };
  const medicineSystemIdfn = (i) => {
    formModel.value.medicineSystemId = i;
    onPageChange(1);
  };
  const djbwfn = (i) => {
    formModel.value.bodyPartsId = i;
    onPageChange(1);
  };
  const bodyPartdata = ref([]);
  const bodyPartfieldnames = ref({ value: 'bodyPartsId', label: 'partsName' });
  const treeshow = ref(false);
  const looktree = () => {
    treeshow.value = true;
  };
  const looktrees = () => {
    treeshow.value = false;
  };
  const imgsrc = ref();
  const imggroup = ref();
  const imgclassdata = ref();
  const addbsshow = ref(false);
  const addbsshowlx = ref(false);
  // const csjishow = ref('测试接受成功');
  const medicineAtlasId = ref('');
  const partsName = ref();
  const atlasTypeName = ref('');
  //
  import { useRoute } from 'vue-router';

  const route = useRoute();
  // 从收藏来的
  if (route.query.tpitem) {
    loding.value = true;
    let item = JSON.parse(route.query.tpitem as string);
    partsName.value = item.caseAtlasName;
    medicineAtlasId.value = item.caseAtlasId;
    atlasTypeName.value = item.atlasTypeName;
    tpxqList({ medicineAtlasId: item.caseAtlasId }).then((res: any) => {
      if (res.code == 200) {
        // 判断是否有分组
        // if (res.data.group.length <= 0) {
        //   imgsrc.value = res.data.allImg;
        // } else {
        //   imgsrc.value = res.data.allImg;
        // }
        loding.value = false;
        imgsrc.value = res.data.allImg;
        imggroup.value = res.data.group;
        imgclassdata.value = res.data.classification;
        xqshow.value = false;

        if (route.query.ms == '1') {
          addbsshow.value = true;
        } else {
          addbsshow.value = true;
          addbsshowlx.value = true;
        }
      }
    });
  }
  // 从书签来的
  if (route.query.medicineAtlasId) {
    loding.value = true;

    partsName.value = route.query.medicineAtlasName;
    medicineAtlasId.value = route.query.medicineAtlasId as string;
    atlasTypeName.value = route.query.atlasTypeName as string;
    tpxqList({ medicineAtlasId: route.query.medicineAtlasId }).then(
      (res: any) => {
        if (res.code == 200) {
          // 判断是否有分组
          // if (res.data.group.length <= 0) {
          //   imgsrc.value = res.data.allImg;
          // } else {
          //   imgsrc.value = res.data.allImg;
          // }
          loding.value = false;
          imgsrc.value = res.data.allImg;
          imggroup.value = res.data.group;
          imgclassdata.value = res.data.classification;
          xqshow.value = false;
          addbsshow.value = true;
        }
      }
    );
  }

  const addbs = (id, item) => {
    //本地缓存  历史记录 图片id
    localStorage.setItem('tpitem', JSON.stringify(item));
    // 自学模式前校验一下
    // if (item.status != '1' || item.status != 1) {
    //   Modal.warning({
    //     title: '提示',
    //     content: '　　　当前图谱暂未开放，请联系管理员!',
    //   });
    //   return;
    // }

    partsName.value = item.medicineAtlasName;
    atlasTypeName.value = item.atlasTypeName;
    // console.log('查询当前名字', item);
    loding.value = true;
    medicineAtlasId.value = id;
    // 查询一下图谱详情
    tpxqList({ medicineAtlasId: id }).then((res: any) => {
      if (res.code == 200) {
        // 判断是否有分组
        // if (res.data.group.length <= 0) {
        //   imgsrc.value = res.data.allImg;
        // } else {
        //   imgsrc.value = res.data.allImg;
        // }
        loding.value = false;
        imgsrc.value = res.data.allImg;
        imggroup.value = res.data.group;
        imgclassdata.value = res.data.classification;
        xqshow.value = false;
        addbsshow.value = true;
      }
    });
  };
  const addbslx = (id, item) => {
    // 自学模式前校验一下
    // if (item.status != '1' || item.status != 1) {
    //   Modal.warning({
    //     title: '提示',
    //     content: '　　　当前图谱暂未开放，请联系管理员!',
    //   });
    //   return;
    // }
    partsName.value = item.partsName;
    atlasTypeName.value = item.atlasTypeName;
    loding.value = true;
    console.log('查询当前名字', item.partsName);

    medicineAtlasId.value = id;
    // 查询一下图谱详情
    tpxqList({ medicineAtlasId: id }).then((res: any) => {
      if (res.code == 200) {
        console.log('图谱详情查询成功', res.data);
        // 判断是否有分组
        if (res.data.group.length <= 0) {
          imgsrc.value = res.data.allImg;
        } else {
          imgsrc.value = res.data.allImg;
        }
        imggroup.value = res.data.group;
        imgclassdata.value = res.data.classification;
        xqshow.value = false;
        addbsshowlx.value = true;
        loding.value = false;
        addbsshow.value = true;
      }
    });
  };

  const fieldNamessd = { value: 'dictDataId', label: 'dictLabel' };
  const goback = () => {
    addbsshow.value = false;
    addbsshowlx.value = false;
  };
  const handleOks = () => {
    xqshow.value = false;
  };
  const handleCancels = () => {
    xqshow.value = false;
  };

  const handleCancelbw = () => {
    addbwShow.value = false;
  };
  const data = reactive([
    {
      key: '1',
      name: '部位1',
    },
  ]);
  const columns = [
    {
      title: '部位名称',
      dataIndex: 'name',
    },
  ];
  const xqshow = ref(false);
  const rules = {
    medicineAtlasName: [
      {
        required: true,
        message: '请输入图谱名称',
      },
    ],
    medicineSystemId: [
      {
        required: true,
        message: '请输入图谱编号',
      },
    ],
    bodyPartsId: [
      {
        required: true,
        message: '请选择人体部位',
      },
    ],
    url: [
      {
        required: true,
        message: '请上传图谱封面',
      },
    ],
    atlasType: [
      {
        required: true,
        message: '请选择图谱类型',
      },
    ],
  };
  const generateDataModel = () => {
    return {
      id: '',
      name: '',
      parentId: '',
    };
  };
  const base = ref((window as any).config.VUE_APP_IMG_API);
  const addForm = ref(generateDataModel());
  const addShow = ref(false);
  const addModel = ref();
  const openAdds = () => {
    addbwShow.value = true;
  };

  const generateFormModel = () => {
    return {
      username: '',
      nickname: '',
      sex: '',
      userType: '',
      medicineSystemId: '',
      bodyPartsId: '',
      medicineAtlasName: '',
      medicineAtlasId: '',
    };
  };
  const basePagination: Pagination = {
    current: 1,
    pageSize: 10,
    total: 0,
  };
  const pagination = reactive({
    ...basePagination,
    'hide-on-single-page': true,
    'show-total': true,
    'show-jumper': true,
    'show-page-size': true,
  });
  const history = ref(['无']);
  history.value = JSON.parse(localStorage.getItem('history')) || ['无'];

  const onPageChange = (current: number) => {
    pagination.current = current;
    if (formModel.value.medicineAtlasName != '') {
      history.value.unshift(formModel.value.medicineAtlasName); // 添加新搜索项到数组的前面
      if (history.value.length > 4) {
        history.value.pop(); // 保持只保存最新的四个记录
      }
      localStorage.setItem('history', JSON.stringify(history.value));
    }
    fetchData();
  };
  const onPageSizeChange = (pageSize: number) => {
    // pagination.pageSize = pageSize;
    fetchData();
  };

  const formModel = ref(generateFormModel());
  const permarkers = ref([]);
  const imessagetotal = ref(0);
  //   获取数据更新
  const fetchData = async () => {
    setLoading(true);
    try {
      tpList({
        medicineAtlasName: formModel.value.medicineAtlasName,
        medicineSystemId: formModel.value.medicineSystemId,
        bodyPartsId: formModel.value.bodyPartsId,
        studentId: studentId.value,
      }).then((res) => {
        // console.log('获取图谱列表', res.data);
        tplistdata.value = res.data;
      });
      rtbwlist({}).then((res) => {
        res.data.forEach((item) => {
          if (item.partsMark != null) {
            const markingPointsObjects = JSON.parse(item.partsMark);
            markingPointsObjects.bsdata[0].bodyPartsId =
              markingPointsObjects.bodyPartsId;
            const existingMarker = permarkers.value.find(
              (marker) => marker.dcomid == markingPointsObjects.dcomid
            );

            if (existingMarker) {
              existingMarker.bsdata.push(...markingPointsObjects.bsdata);
            } else {
              permarkers.value.push(markingPointsObjects);
            }
          }
        });
      });
      personList({}).then((res) => {
        // console.log('请求成功', res.data);

        bodyPartdata.value = res.data.list;
      });
      select({ dictType: 'medicine_system' }).then((res) => {
        medicineSystemIddata.value = res.data;
      });
      // 获取树结构
      getTree({ dictType: 'medicine_system' }).then((res: any) => {
        if (res.code == 200) {
          treeData.value = res.data;
          // console.log('查询树成功', res.data);
        }
      });
      // 获取消息列表 imessagetotal.value = res.data.total;
      noticeList({
        pageNum: 1,
        pageSize: 1,
        studentId: studentId.value,
      }).then((res: any) => {
        if (res.code == 200) {
          imessagetotal.value = res.data.total;
        }
      });
    } catch (err) {
      console.log(err);
    } finally {
      setLoading(false);
    }
  };
  const treeData = ref([]);
  const changesd = (
    selectedKeys: Array<string | number>,
    data: {
      selected?: boolean;
      selectedNodes: TreeNodeData[];
      node?: TreeNodeData;
      e?: Event;
    }
  ) => {
    // 获取当前点击的节点数据
    const currentNode = data.node as any;
    if (currentNode.medicineAtlasId) {
      formModel.value.medicineAtlasId = currentNode.medicineAtlasId;
      tpList({
        medicineAtlasId: formModel.value.medicineAtlasId,
        medicineAtlasName: formModel.value.medicineAtlasName,
        medicineSystemId: formModel.value.medicineSystemId,
        bodyPartsId: formModel.value.bodyPartsId,
      }).then((res) => {
        tplistdata.value = res.data;
      });
    }

    // console.log('所有被选中的节点:', allSelectedNodes);
    // console.log('当前节点是否被选中:', isSelected);
  };
  const medicineSystemIddata = ref([]);
  //  图谱详情 内容管理
  // const gobw = () => {
  //   xqshow.value = true;
  // };
  fetchData();
  const visible = ref(false);

  // 添加收藏
  const addfolderfn = (item: any) => {
    console.log('当前收藏', item);
    if (item.favoriteStatus != 1) {
      addfolder({
        studentId: studentId.value,
        caseAtlasId: item.medicineAtlasId,
        status: 1,
      }).then((res: any) => {
        if (res.code == 200) {
          showSuccessToast('收藏成功');
          fetchData();
        } else {
          showFailToast('失败');
        }
      });
    } else {
      deletefolder({
        favoriteFolderIds: item.favoriteFolderId,
      }).then((res: any) => {
        if (res.code == 200) {
          showSuccessToast('取消成功');
          fetchData();
        } else {
          showFailToast('失败');
        }
      });
    }
  };
  const searchshow = ref(false);
  const show = ref(false);

  const backfn = () => {
    searchshow.value = false;
    reset();
  };
  const lsfn = (item) => {
    formModel.value.medicineAtlasName = item;
    onPageChange(1);
  };
</script>

<style scoped>
  .searchshowbox {
    padding-bottom: 10px;
    background: linear-gradient(180deg, #8f9cab 0%, #ffffff 81%);
  }
  .backfn {
    color: #666666;
    font-size: 36px;
  }
  .clser {
    width: 100%;
    height: 200px;
    text-align: center;
    color: #666666;
    font-size: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .sbody {
    /* background: #f5f6fa !important; */
    background: url(/src/assets/images//tpxxbj.png) repeat-x;
  }
  .sbodyx {
    /* background: #f5f6fa !important; */
    background: none;
  }

  .wbox {
    display: flex;
    flex-direction: column;
  }
  .bwbox {
    display: flex;
    flex-wrap: wrap; /* 允许换行 */
    gap: 100px; /* 添加元素间的间距 */
    width: 100%; /* 设置宽度为100% */
    height: 100%;
    box-sizing: border-box; /* 包含 padding 和 border 在内 */
    justify-content: flex-start; /* 从左边开始对齐 */
  }

  .bwitem {
    flex: 0 0 180px; /* 固定宽度为400px */
    height: 200px;
    cursor: pointer;
    box-sizing: border-box; /* 确保 padding 和 border 在内 */
    display: flex;
    flex-direction: column;
    margin-bottom: 5px;
    /* 水平居中对齐 */
  }

  /* 在容器的 .bwbox 上应用水平对齐 */
  .bwbox {
    justify-content: flex-start; /* 从左边开始对齐 */
  }
  .bwitemimg {
    width: 180px;
    height: 180px;
    /* background: rgba(0, 255, 221, 0.637); */
  }
  .bwitemimg img {
    width: 180px;
    height: 180px;
  }
  .bwitemdesbox {
    width: 180px;
    display: flex;
    margin: 10px 0;

    /* flex-direction: column;
        margin-left: 15px;
        justify-content: center;
        align-content: center; */
  }

  /* 滚动条美化 */
  .beautifulScroll::-webkit-scrollbar {
    width: 5px;
    height: 5px;
    background: rgba(0, 0, 0, 0);
    border-radius: 5px;
  }

  .beautifulScroll::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0);
    border-radius: 5px;
  }

  .beautifulScroll::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background: #666666;
  }

  .lsshow {
    width: 689px;
    height: 123px;
    background: linear-gradient(#ffffff 0%, #e1e4e8 100%);
    box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.15);
    border-radius: 10px 10px 10px 10px;
    display: flex;
    font-size: 26px;
    align-items: center;
    /* justify-content: center; */
    z-index: 999;
    position: absolute;
    bottom: 120px;
    left: 50%;
    transform: translate(-50%, 0);
  }
  .lsmain {
    display: flex;
    margin-left: 20px;
    width: 480px;
  }
  .lsimg {
    width: 86px;
    height: 86px;
    border-radius: 15px;
    overflow: hidden;
  }
  .lsimg img {
    width: 86px;
    height: 86px;
  }
  .lsdes {
    display: flex;
    flex-direction: column;
    width: 240px;
    margin: 0px 15px;
  }
  .lsdespages {
    color: #999999;
    font-size: 24px;
  }
  .lsdesname {
    font-size: 30px;
    margin: 10px 0;
  }
  .lsclose {
    width: 32px;
    height: 32px;
    position: absolute;
    right: -15px;
    top: -15px;
  }
  /* 侧边栏样式 */
  .sidebar {
    width: 165px;
    z-index: 99;
    font-size: 26px;
    height: 100%;
    padding: 0px 10px;
    color: #666666;
  }
  .sidebar-item {
    height: 86px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin: 10px 0;
  }

  .sidebar-item.active {
    background-color: #f3f0f0ec;
    font-weight: 800;
    color: #ffffff;
    height: 86px;
    background: linear-gradient(180deg, #748191 0%, #242834 100%);
    border-radius: 10px 10px 10px 10px;
  }
  /* 侧边栏样式结束 */

  .maintpbox {
    display: flex;
    height: 91%;
  }
  .mainboxrights {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    padding-bottom: 160px;
    background-color: white;
  }
  .mainboxright {
    display: flex;
    flex-direction: column;
    width: 585px;
    height: 100%;
    overflow-y: auto;
    padding-bottom: 160px;
  }

  .maintpitem {
    display: flex;
    flex-direction: column;
  }
  .maintpitembox {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .tpitemboxs {
    display: flex;
    width: 700px;
    height: 199px;
    background: #eef1f4;
    border-radius: 10px 10px 10px 10px;
    margin: 12px 10px;
    align-items: center;
    border-radius: 20px;
    padding: 0px 15px;
  }
  .tpitembox {
    display: flex;
    width: 554px;
    height: 199px;
    background: #eef1f4;
    border-radius: 10px 10px 10px 10px;
    margin: 12px 10px;
    align-items: center;
    border-radius: 20px;
    padding: 0px 15px;
  }
  .tpitemmain {
    display: flex;
    flex-direction: column;
    margin: 0px 10px;
  }
  .maintpheader {
    /* background-color: #fff; */
    padding-left: 20px;
    font-size: 30px;
    width: 100%;
  }
  .tpitemment {
    display: flex;
  }
  .tpitemmentzx {
    color: #292d3a;
    font-size: 26px;
    width: 144px;
    height: 58px;
    background: #eef1f4;
    border-radius: 45px 45px 45px 45px;
    border: 1px solid #262a37;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0px 5px;
  }
  .tpitemmentlx {
    color: #ffff;
    font-size: 26px;
    width: 144px;
    height: 58px;
    background: linear-gradient(180deg, #748191 0%, #242834 100%);
    border-radius: 45px 45px 45px 45px;
    border: 1px solid #262a37;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0px 5px;
  }
  .tpitemname {
    font-size: 30px;
    width: 300px;

    /* 让文本不换行 */
    white-space: nowrap;
    /* 隐藏溢出内容 */
    overflow: hidden;
    /* 溢出部分用省略号表示 */
    text-overflow: ellipsis;
  }
  .tpitemimg {
    width: 170px;
    height: 170px;
    border-radius: 10px 10px 10px 10px;
    overflow: hidden;
  }
  .tpitemimg img {
    width: 170px;
    height: 170px;
  }
  .headbox {
    display: flex;
    width: 100%;
    padding: 20px 30px;
    z-index: 99;
    align-items: center;
    justify-content: center;
  }
  .ctbox {
    /* background-color: red; */
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
  }
  .ctitem {
    width: 264px;
    height: 70px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;

    text-align: center;
    color: #666666;
    margin: 5px auto;
    font-size: 28px;
  }
  .ctitem.active {
    background-color: #5f6d7c;
    color: #ffff;
  }
  .lsbotton {
    width: 160px;
    height: 54px;
    border-radius: 45px 45px 45px 45px;
    border: 1px solid #3d4957;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 10px;
    margin-right: 20px;
  }
  .small {
    width: 20px;
    height: 20px;
    margin-left: 10px;
  }
  .tpxxbj {
    position: absolute;
    width: 750px;
    left: 0px;
    top: 0px;
    height: 400px;
    z-index: 1;
  }
  .headserbox {
    display: flex;
    align-items: center;
    width: 430px;
    height: 75px;
    background: #ffffff;
    border-radius: 71px 71px 71px 71px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    font-size: 26px;
    color: #cccccd;
  }
  .headserboximg {
    margin: 0px 25px;
    width: 32px;
    height: 32px;
  }
  .clearser {
    width: 60px;
    height: 33px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 4px 4px 4px 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #5f6d7c;
    margin: 0px 15px;
  }
  .selcetboximg {
    color: #ffffff;
    font-size: 26px;
    display: flex;
    align-items: center;
  }
  .selcetboximg img {
    width: 32px;
    height: 32px;
    margin-right: 5px;
  }
  .tpitemscimg {
    width: 28px;
    height: 28px;
    margin: 0px 5px;
  }
  .tpitemsc {
    font-size: 26px;
    color: #666666;
    display: flex;
    align-items: center;
    margin: 15px 0;
    cursor: pointer;
  }
  .ctfiexd {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    background: rgba(0, 0, 0, 0.75);
    z-index: 9999;
  }
  .ctmain {
    width: 304px;
    background-color: #fff;
    height: 100%;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 0px;
    right: 0px;
  }
  .cttop {
    font-size: 28px;
    padding: 10px 20px;
    width: 100%;
    margin: 15px 0;
  }
  .closenew {
    width: 40px;
    height: 40px;
    position: absolute;
    right: 20px;
  }
  .serachlsbox {
    display: flex;
    padding: 10px 30px;
    align-items: center;
    justify-content: space-between;
  }
  .serchlsdel img {
    width: 30px;
    height: 30px;
  }
  .serchlstitle {
    font-size: 32px;
    color: #333333;
    font-weight: 800;
  }
  .serchlsitembox {
    display: flex;
    background-color: white;
    flex-wrap: nowrap; /* 允许换行 */
    padding: 15px 30px;
    justify-content: flex-start; /* 向左对齐项 */
  }
  .serchlsitem {
    background: #f6f7f8;
    border-radius: 59px;
    font-size: 32px;
    color: #666666;
    padding: 10px 20px;
    max-width: 170px;
    white-space: nowrap; /* 防止文本换行 */
    overflow: hidden; /* 隐藏超出的部分 */
    text-overflow: ellipsis; /* 超出部分显示省略号 "..." */
    margin: 0px 10px;
  }
  .henxx {
    margin-left: 10px;
    position: relative;
  }
  .henxx img {
    height: 59px;
    width: 59px;
  }
  .henxxicon {
    border-radius: 50%;
    background-color: red;
    color: #fff;
    font-size: 20px;
    width: 29px;
    height: 29px;
    position: absolute;
    top: -5px;
    right: -5px;
    text-align: center;
    line-height: 29px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
</style>
